<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-button type="primary" round @click="showAdd">添加分类</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="goodsCategories"
      v-loading="loading"
      style="width: 100%;margin-bottom: 20px;"
      border
      row-key="cat_id">
      <el-table-column
        prop="cat_name"
        label="分类名称"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        label="是否有效"
        sortable
        width="180">
        <template slot-scope="scope">
          {{ scope.row.cat_deleted ? '无效' : '有效' }}
        </template>
      </el-table-column>
      <el-table-column
        label="排序">
        <template slot-scope="scope">
          {{ ['一级', '二级', '三级'][scope.row.cat_level] }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger">删除</el-button>
          <el-button size="mini" type="primary">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分类 -->
    <CategoryAdd ref="categoryAddEl" @add-success="loadGoodsCategories" />
  </div>
</template>
<script>
import { getGoodsCategoryList } from '@/api/goods-category'
import CategoryAdd from './add'
export default {
  name: 'GoodsCategory',
  components: {
    CategoryAdd
  },
  data () {
    return {
      goodsCategories: [],
      loading: true
    }
  },
  created () {
    this.loadGoodsCategories()
  },
  methods: {
    async loadGoodsCategories () {
      this.loading = true
      const { data, meta } = await getGoodsCategoryList()
      if (meta.status === 200) {
        this.goodsCategories = data
        this.loading = false
      }
    },
    showAdd () {
      this.$refs.categoryAddEl.show()
    }
  }
}
</script>
<style scoped>
</style>
